<template>
  <div id="app">
    <router-view></router-view>
    <chat-room :show.sync="show" :chatRoom="chatRoom" ref="chatroom"></chat-room>
  </div>
</template>

<script>
  import ChatRoom from './components/chat-room/ChatRoom'
  import { getSocketRoom } from "./api/home";
  import { ERROR_NO } from "./util/config";
  export default {
    data () {
      return {
        show: false,
        chatRoom: []
      }
    },
    methods: {
      _getSocketRoom() {
        getSocketRoom().then(res => {
          if (res.code === ERROR_NO) {
            this.chatRoom = res.data.room.reverse()
            const firstInfo = this.chatRoom[0] || {}
            this.$refs.chatroom.init = true
            this.$refs.chatroom.inChat(firstInfo.id, firstInfo.roomName)
          }
        })
      },
    },
    mounted () {
      this._getSocketRoom()
    },
    components: {
      ChatRoom
    }
  }
</script>

<style lang="scss">
  .image {
    width: 100%;
    height: 304px;
  }
  .html::-webkit-scrollbar,
  .body::-webkit-scrollbar {
    width: 0;
  }
</style>
